<template>
  <Card title="会员年龄分布" :loading="loading" hoverable>
    <template #extra>
      <div class="extra-item">
        <a-select
            v-model:value="value"
            show-search
            :filterOption="false"
            allow-clear
            placeholder="请选择地区"
            :fieldNames="fieldNames"
            @change="airportChange"
            style="width: 200px"
            @search="search"
            :options="options"
        ></a-select>
      </div>
    </template>
    <div ref="chartRef" :style="{ width, height }"></div>
  </Card>
</template>
<script lang="ts" setup>
import {onMounted, Ref, ref, watch} from 'vue'
import {Card, SelectProps} from 'ant-design-vue'
import {useECharts} from '@/hooks/web/use-echarts'
import {useDataSource} from "@/hooks/web/use-echarts/useDataSource";
const props = defineProps({
  loading: Boolean,
  width: {
    type: String as PropType<string>,
    default: '100%',
  },
  height: {
    type: String as PropType<string>,
    default: '350px',
  },
})
const options = ref<SelectProps['options']>([
  {value: 'jack', label: '凤凰机场'},
  {value: 'lucy', label: '白云山机场'},
  {value: 'tom', label: '上海浦东国际机场'},
]);
const fieldNames =  {
  label:'airportName',
  value:'airportId'
}
const value = ref();
const chartRef = ref<HTMLDivElement | null>(null)
const {setOptions} = useECharts(chartRef as Ref<HTMLDivElement>)
let {queryData} = useDataSource(props, initOptions);

/**
 * 初始化
 */
function initOptions(chartData) {
  let option: any = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      bottom: '1%',
      left: 'center',
    },
    series: [
      {
        color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9'],
        name: '年龄段',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '12',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: chartData,
        animationType: 'scale',
        animationEasing: 'exponentialInOut',
        animationDelay: function () {
          return Math.random() * 100
        },
      },
    ],
  }
  setOptions(option);
}


function initData(params) {
  queryData({
    url: "adminTotal/ageProportion",
    params
  });
}
function search(value) {
  airportList({
    airportName:value
  }).then((res) => {
    options.value = res;
  });
}

onMounted(() => {
 
});
function airportChange(){
  initData({
    airportId:value.value
  });
}

watch(
    () => props.loading,
    () => {
      if (props.loading) {
        return
      }
      //initData({})
    },
    {immediate: true},
)
</script>
